<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            // $("img").click(function () {
            //     $(this).animate({"left": "1600px", "top": "0px"}, 1000)
            //         .animate({"left": "800px", "top": "600px"}, 1000)
            //         .animate({"left": "0px", "top": "0px"}, 1000);
            //     // 在jquery的事件中,如果传递function参数,则表示触发事件之后执行什么处理
            //     // 如果不传递参数,表示让元素去触发什么事件
            //     // 通过代码点击图片
            //     $(this).click();
            // });
            $(".c1").click(function(){
                $(this).animate({"left": "1600px", "top": "0px","width":"200px","height":"200px","border-radius":"30%"}, 1000)
                    .animate({"left": "800px", "top": "600px","width":"300px","height":"300px","border-radius":"50%"}, 1000)
                    .animate({"left": "0px", "top": "0px","width":"100px","height":"100px","border-radius":"0%"}, 1000);
                $(this).click();
            });
        });
    </script>
</head>
<body>
<!--<img src="../images/heihei.gif" alt="图片加载失败" style="position: relative;left: 0px;top: 0px;">-->
<div class="c1" style="width: 100px;height: 100px;background-color: red;position: relative;left: 0px;top: 0px;"></div>
</body>
</html>